<template>
	<view>
		<!-- 海报弹窗 -->
		<view class="cu-modal" :class="{ show: showPoster }" @tap="onClosePoster">
			<view class="cu-dialog" style="width: 640rpx; background: none;">
				<view class="poster-img-box"><image class="poster-img" :src="posterImage" mode="widthFix"></image></view>
				<view class="poster-btn-box u-m-t-20 u-flex u-row-between u-col-center" v-show="posterImage">
					<button class="cancel-btn u-reset-button" @tap="showPoster = false">取消</button>
					<button class="save-btn u-reset-button" @tap="saveImage">{{ ["wxOfficialAccount", "H5"].includes(platform) ? "长按图片保存" : "保存图片" }}</button>
				</view>
			</view>
		</view>
		<!-- 各海报模块 -->
		<shopro-canvas v-if="showPoster" :canvasParams="canvasParams" @success="onSuccess"></shopro-canvas>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
	import Auth from "@/shopro/permission/index.js";

	export default {
		data() {
			return {
				platform: this.$platform.get(),
				showPoster: false,
				posterImage: "",
				canvasParams: {},
				posterType: "goods",
			};
		},
		computed: {
			...mapGetters(["initShare", "userInfo", "isLogin", "shareInfo"]),
		},

		methods: {
			// 关闭弹窗
			onClosePoster() {
				this.showPoster = false;
				uni.showTabBar();
			},
			// 绘制成功
			onSuccess(e) {
				this.posterImage = e;
			},
			// 开始绘制
			onPoster(posterType = "goods") {
				this.showPoster = true;
				this.posterType = posterType;
				this.posterImage = "";
				if (this.$store.getters.isLogin) {
					this.canvasParams = this.getPosterFormatter();
					console.log("this.canvasParams", this.canvasParams);
					this.showPoster = true;
				} else {
					this.$store.dispatch("showAuthModal", "accountLogin");
				}
				this.showShare = false;
			},
			// 保存图片
			async saveImage() {
				let that = this;
				if (["wxOfficialAccount", "H5"].includes(this.platform)) {
					this.$u.toast("长按图片保存");
					return false;
				}
				let authState = await new Auth("writePhotosAlbum").check();
				if (authState) {
					uni.saveImageToPhotosAlbum({
						filePath: that.posterImage,
						success: res => {
							this.$u.toast("保存成功");
							this.showPoster = false;
						},
						fail: err => {
							console.log(`图片保存失败:`, err);
							this.$u.toast("保存失败");
						},
					});
				}
			},
			getPosterFormatter() {
				if (this.posterType === "goods") {
					return {
						backgroundImage: "/static/images/share-bg.png",
						drawArray: [
							{
								name: "avatar",
								type: "image",
								url: this.userInfo.avatar,
								alpha: 1,
								dy: 70,
								dx: 60,
								dWidth: 100,
								dHeight: 100,
								circleSet: {},
							},
							{
								type: "text",
								text: this.userInfo.nickname,
								size: 32,
								color: "#000000",
								alpha: 1,
								textAlign: "middle",
								textBaseline: "bottom",
								dx: 180,
								dy: 70,
							},
							{
								type: "text",
								text: "为您推荐一件好物",
								size: 32,
								color: "#666666",
								alpha: 1,
								textAlign: "middle",
								textBaseline: "middle",
								dx: 180,
								dy: 132,
							},
							{
								name: "goods",
								type: "image",
								url: "/static/images/index-vip.png",
								alpha: 1,
								dy: 220,
								dx: 58,
								dWidth: 570,
								dHeight: 784,
							},
							{
								type: "text",
								text: "新经济 新医美 新模式",
								size: 32,
								color: "#3699F9",
								alpha: 1,
								textAlign: "middle",
								textBaseline: "middle",
								dx: 175,
								dy: 1012,
							},
							{
								type: "text",
								text: "打造新医美消费就业新经济体",
								size: 32,
								color: "#3699F9",
								alpha: 1,
								textAlign: "middle",
								textBaseline: "middle",
								dx: 63,
								dy: 1058,
							},
							{
								type: "text",
								text: "更多权益 扫描二维码 查看购买",
								size: 24,
								color: "#333333",
								alpha: 1,
								textAlign: "middle",
								textBaseline: "middle",
								dx: 225,
								dy: 1108,
							},
							// #ifdef MP-WEIXIN
							{
								name: "wxCode",
								type: "image", //微信小程序码
								url: `${this.$API_URL}wechat/wxacode?scene=${this.shareInfo.query}`,
								alpha: 1,
								dx: 530,
								dy: 1020,
								dWidth: 110,
								dHeight: 110,
							},
							// #endif
							// #ifndef MP-WEIXIN
							{
								type: "qrcode",
								text: this.shareInfo.copyLink,
								size: 110,
								dx: 530,
								dy: 1020,
							},
							// #endif
						],
					};
				}

				if (this.posterType === "invite") {
					return {
						background: {
							width: 686,
							height: 828,
							color: "#A9D8FA",
						},
						drawArray: [
							{
								name: "bg",
								type: "image",
								url: "/static/images/demo2.png",
								alpha: 1,
								dx: 0,
								dy: 0,
								dWidth: 686,
								dHeight: 828,
							},
						],
					};
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.poster-img-box {
		.poster-img {
			width: 660rpx;
			min-height: 800rpx;
			border-radius: 20rpx;
		}
	}
	// 分享海报
	.poster-btn-box {
		.cancel-btn {
			width: 280rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #ffffff;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.save-btn {
			width: 280rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #3699f9;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
</style>
